<template>
  <div class="container">
    <el-card style="padding: 20px; margin: 10px">
      <QuestionsForm
        :quesForm="quesForm"
        :now="now"
        :tableData.sync="tableData"
      />

      <!-- 题目表格部分 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-alert
          :title="`数据一共${page.total}条`"
          type="info"
          show-icon
          style="margin-bottom: 20px"
        >
        </el-alert>
        <el-tab-pane label="全部" name="first">
          <ChoiceList :tableData="tableData" @ChoiceList="ChoiceList" />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <ChoiceList :tableData="waitData" @ChoiceList="ChoiceList" />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <ChoiceList :tableData="passData" @ChoiceList="ChoiceList" />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <ChoiceList :tableData="refuseData" @ChoiceList="ChoiceList" />
        </el-tab-pane>
      </el-tabs>

      <!-- 分页 -->
      <pageTool
        style="float: right; margin: 20px 0"
        :paginationPagesize="page.pagesize"
        :paginationPage="page.page"
        :total="page.total"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
      />
      <!-- <el-row type="flex" class="row-bg" justify="end">
        <el-pagination
          style="margin-top: 20px; margin-bottom: 15px"
          background
          :page-sizes="[5, 10, 15, 20]"
          :page-size="Number(page.pagesize)"
          layout="prev, pager, next, sizes,jumper"
          :total="Number(total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(page.page)"
        >
        </el-pagination>
      </el-row> -->
    </el-card>
  </div>
</template>

<script>
import QuestionsForm from "../components/questions-form";
import { choice } from "@/api/hmmm/questions.js";
import { parseTimeByString } from "@/filters";
import pageTool from "@/module-dashboard/components/pageTool.vue";
import ChoiceList from "../components/choice-list";
// import {
//   questionType,
//   difficulty,
//   chkType,
//   publishType,
// } from "@/api/hmmm/constants.js";
export default {
  components: { QuestionsForm, pageTool, ChoiceList },
  data() {
    return {
      now: "choice",
      quesForm: {
        user: "",
        region: "",
      },
      tableData: [],
      waitData: [],
      passData: [],
      refuseData: [],

      activeName: "first",

      // paginationPagesize: 10, //每页显示条目数
      // paginationPage: 1, //当前页数
      // total: 0, //总数
      // 页码
      page: {
        total: 0, //总数
        page: 1,
        pagesize: 10,
      },
    };
  },
  created() {
    this.ChoiceList();
  },
  methods: {
    // 初始化时获取精选题目
    async ChoiceList(params) {
      this.waitData = [];
      this.passData = [];
      this.refuseData = [];
      const { data } = await choice({ ...this.page });
      this.tableData = data.items;
      this.page.total = data.items.length;

      this.tableData.forEach((item) => {
        // console.log(item);
        Object.keys(item).forEach((key) => {
          // 待审核题目
          if (item.chkState * 1 === 0 * 1) {
            this.waitData.indexOf(item) == -1 ? this.waitData.push(item) : "";
            // 通过题目
          } else if (item.chkState === 1) {
            this.passData.indexOf(item) == -1 ? this.passData.push(item) : "";
            // 拒绝题目
          } else if (item.chkState === 2) {
            this.refuseData.indexOf(item) == -1
              ? this.refuseData.push(item)
              : "";
          }
        });
      });
    },
    // // 换页触发
    pageChange(pageNum) {
      this.page.page = pageNum;
      this.ChoiceList();
    },
    // // 切换条数
    pageSizeChange(val) {
      this.page.pagesize = val;
      if (this.page.page === 1) {
        this.ChoiceList(this.page);
      }
    },
    // 每页几条数据
    handleSizeChange(val) {
      this.page.pagesize = val;
      if (this.page.page === 1) {
        this.ChoiceList(this.page);
      }
    },
    // handleCurrentChange(val) {
    //   this.page.page = val;
    //   this.ChoiceList();
    // },

    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
};
</script>

<style scoped lang='less'></style>
